<!-- 护理项目列表页 -->
<template>
      <div class="baseList">
        <div class="newBox">
          <button class="bt wt-120" @click="handleBuild()">新增护理项目</button>
        </div>
        <div class="tableBoxs">
          <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
          <t-table 
          row-key="index" 
          :data="data" 
          :columns="COLUMNS" 
          :bordered="bordered" 
          :hover="hover" 
          :size="size"
          cell-empty-content="-" 
          resizable 
          lazy-load
          >

          <!-- 图片预览及展示 -->
          <template #image="{ row }">
            <div class="tdesign-demo-image-viewer__base">
              <t-image-viewer :images="[row.image]">
                <template #trigger="{ open }">
                  <div class="tdesign-demo-image-viewer__ui-image">
                    <img alt="test" 
                    :src="row.image" 
                    class="tdesign-demo-image-viewer__ui-image--img" />
                    <div class="tdesign-demo-image-viewer__ui-image--hover" 
                    @click="open">
                      <span>
                        <BrowseIcon size="1.4em" /> 预览
                      </span>
                    </div>
                  </div>
                </template>
              </t-image-viewer>
            </div>
          </template>
  
  
          <!-- 价格处理 -->
          <template #price="{row}">
            {{ row.price.toFixed(2) }}
          </template>
  
          <!-- 操作栏 -->
          <template #op="{row}">
            <div class="operateCon">
              <a class="btn-dl">删除</a>
              <a class="font-bt" @click="handleEdit(row.id)">编辑</a>
              <a class="delete">禁用</a>
            </div>
          </template>
  
          <!-- 序号处理 -->
           <template #rowIndex="{ rowIndex }">
            {{ 
              (pagination.pageNum - 1) * pagination.pageSize + (rowIndex + 1)
              }}
           </template>
        </t-table>
  
          <!-- 分页 -->
          <t-pagination 
          v-if="total > 4" 
          v-model="pagination.pageNum" 
          v-model:pageSize="pagination.pageSize"
            :total="total" 
            @change="onPageChange" />
  
        </div>
      </div>
</template>

<script setup lang="jsx">
import { COLUMNS } from '../constants'



  const props = defineProps({
    data: {
        type:Object,
        default:[]
    },
    bordered:Boolean,
    hover:Boolean,
    size:Number,
    total:Number,
    pagination:{
        type:Object,
        default:{}
    }
  })

  //接收事件
  const emits = defineEmits(['onPageChange','handleBuild','handleEdit'])

  //当前子组件onPageChange
  const onPageChange = (pageInfo) =>{
    //调用父组件
    emits('onPageChange',pageInfo)
  }
  
//执行新增事件
const handleBuild = () =>{
  emits('handleBuild')
}

//编辑点击事件
const handleEdit =(id)=>{
  emits('handleEdit',id)
}

 </script>

  